<template>
  <div class="create-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>创建新提示词</h2>
      <p>设计你的专属提示词，分享创意与灵感</p>
    </div>

    <div class="create-content">
      <!-- 提示词编辑区 -->
      <div class="editor-section">
        <el-form :model="promptForm" ref="promptFormRef" :rules="rules" label-width="100px">
          <el-form-item label="提示词内容" prop="prompt">
            <el-input
              v-model="promptForm.prompt"
              type="textarea"
              :rows="6"
              placeholder="请输入你的提示词，越详细效果越好..."
              class="prompt-textarea"
            />
            <div class="word-count">{{ promptForm.prompt.length }}/1000</div>
          </el-form-item>

          <el-form-item label="选择平台" prop="platforms">
            <el-checkbox-group v-model="promptForm.platforms">
              <el-checkbox 
                v-for="platform in availablePlatforms" 
                :key="platform.value"
                :label="platform.value"
                class="platform-checkbox"
              >
                <span class="platform-name">{{ platform.label }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="提示词分类" prop="category">
            <el-select v-model="promptForm.category" placeholder="请选择分类" clearable>
              <el-option-group label="图像生成">
                <el-option label="人物肖像" value="portrait"></el-option>
                <el-option label="风景摄影" value="landscape"></el-option>
                <el-option label="动漫插画" value="anime"></el-option>
                <el-option label="抽象艺术" value="abstract"></el-option>
                <el-option label="产品设计" value="product"></el-option>
              </el-option-group>
              <el-option-group label="文本生成">
                <el-option label="故事创作" value="story"></el-option>
                <el-option label="诗歌散文" value="poem"></el-option>
                <el-option label="代码生成" value="code"></el-option>
                <el-option label="营销文案" value="marketing"></el-option>
              </el-option-group>
              <el-option-group label="其他类型">
                <el-option label="音频生成" value="audio"></el-option>
                <el-option label="视频生成" value="video"></el-option>
                <el-option label="多模态" value="multimodal"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>

          <el-form-item label="添加标签">
            <el-input
              v-model="tagInput"
              placeholder="输入标签后按回车添加"
              @keyup.enter="addTag"
              class="tag-input"
              prefix-icon="el-icon-collection-tag"
            />
            <div class="tags-container">
              <el-tag
                v-for="tag in promptForm.tags"
                :key="tag"
                closable
                @close="removeTag(tag)"
                class="tag-item"
              >
                {{ tag }}
              </el-tag>
            </div>
          </el-form-item>

          <el-form-item label="提示词描述" prop="description">
            <el-input
              v-model="promptForm.description"
              type="textarea"
              :rows="3"
              placeholder="简单描述一下这个提示词的用途或特点..."
            />
          </el-form-item>

          <el-form-item label="上传预览图">
            <el-upload
              class="upload-demo"
              action=""
              :auto-upload="false"
              :on-change="handlePreviewUpload"
              :limit="1"
              :on-exceed="handleExceed"
              list-type="picture"
              accept="image/*"
            >
              <el-button type="primary">
                <UploadFilled /> 选择图片
              </el-button>
              <template #tip>
                <div class="el-upload__tip">
                  只能上传jpg/png文件，且不超过2MB
                </div>
              </template>
            </el-upload>
            <div v-if="previewImageUrl" class="preview-thumbnail">
              <img :src="previewImageUrl" alt="预览图" class="thumbnail-image" />
              <el-button type="danger" size="small" @click="clearPreviewImage">删除预览</el-button>
            </div>
          </el-form-item>

          <el-form-item label="" prop="isPublic">
            <el-switch
              v-model="promptForm.isPublic"
              active-text="公开分享到广场"
              inactive-text="仅自己可见"
            ></el-switch>
          </el-form-item>
        </el-form>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="previewPrompt">预览效果</el-button>
          <el-button type="success" @click="submitPrompt">保存并发布</el-button>
        </div>
      </div>

      <!-- 右侧提示和建议 -->
      <div class="tips-section">
        <div class="tips-card">
          <h3>提示词优化建议</h3>
          <ul class="tips-list">
            <li>使用具体的细节描述，如颜色、材质、风格等</li>
            <li>指定艺术风格或参考艺术家的名字</li>
            <li>明确主体、场景和氛围</li>
            <li>添加构图、光线和视角的描述</li>
            <li>控制提示词长度，避免过于冗长</li>
          </ul>
        </div>

        <div class="tips-card">
          <h3>常用风格参考</h3>
          <div class="style-tags">
            <el-tag 
              v-for="style in popularStyles" 
              :key="style"
              effect="plain"
              @click="appendToPrompt(`风格: ${style}`)"
              class="style-tag"
            >
              {{ style }}
            </el-tag>
          </div>
        </div>

        <div class="tips-card">
          <h3>示例模板</h3>
          <el-dropdown @command="useTemplate">
            <el-button>选择模板</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="portrait">人物肖像模板</el-dropdown-item>
                <el-dropdown-item command="landscape">风景摄影模板</el-dropdown-item>
                <el-dropdown-item command="anime">动漫插画模板</el-dropdown-item>
                <el-dropdown-item command="code">代码生成模板</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 预览对话框 -->
    <el-dialog 
      title="提示词预览效果" 
      v-model="showPreviewDialog"
      width="70%"
    >
      <div class="preview-dialog-content">
        <div class="preview-prompt-section">
          <h4>当前提示词</h4>
          <div class="preview-prompt-text">{{ promptForm.prompt }}</div>
        </div>

        <div class="preview-platforms-section">
          <h4>在以下平台的预览效果</h4>
          <div class="platform-previews">
            <div 
              v-for="platform in selectedPlatforms" 
              :key="platform"
              class="platform-preview"
            >
              <h5>{{ platform }}</h5>
              <div class="preview-result">
                <div class="preview-placeholder">
                  <Loading v-if="previewLoading" />
                  <div v-else class="preview-image-placeholder">
                    预览效果将在这里显示
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="preview-actions">
          <el-button @click="adjustPrompt">调整提示词</el-button>
          <el-button type="primary" @click="confirmPreview">确认并保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { UploadFilled, Loading } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

export default {
  name: 'Create',
  components: {
    UploadFilled,
    Loading
  },
  setup() {
    const router = useRouter()
    const promptFormRef = ref()
    const showPreviewDialog = ref(false)
    const previewLoading = ref(false)
    const tagInput = ref('')
    const previewImageUrl = ref('')

    // 可用平台列表
    const availablePlatforms = [
      { label: '豆包', value: '豆包' },
      { label: '通义', value: '通义' },
      { label: '即梦', value: '即梦' }
    ]

    // 流行风格标签
    const popularStyles = [
      '写实风格', '油画风格', '水彩风格', '素描风格',
      '赛博朋克', '蒸汽波', '赛璐璐', '像素艺术',
      '极简主义', '超现实主义', '印象派', '未来主义'
    ]

    // 表单数据
    const promptForm = reactive({
      prompt: '',
      platforms: [],
      category: '',
      tags: [],
      description: '',
      isPublic: true
    })

    // 表单验证规则
    const rules = {
      prompt: [
        { required: true, message: '请输入提示词内容', trigger: 'blur' },
        { min: 5, max: 1000, message: '提示词长度应在5-1000个字符之间', trigger: 'blur' }
      ],
      platforms: [
        { required: true, message: '请至少选择一个平台', trigger: 'change' }
      ],
      category: [
        { required: true, message: '请选择提示词分类', trigger: 'change' }
      ]
    }

    // 计算选中的平台
    const selectedPlatforms = computed(() => {
      return promptForm.platforms.map(platform => {
        const plat = availablePlatforms.find(p => p.value === platform)
        return plat ? plat.label : platform
      })
    })

    // 添加标签
    const addTag = () => {
      const tag = tagInput.value.trim()
      if (tag && !promptForm.tags.includes(tag) && promptForm.tags.length < 5) {
        promptForm.tags.push(tag)
      }
      tagInput.value = ''
    }

    // 移除标签
    const removeTag = (tag) => {
      const index = promptForm.tags.indexOf(tag)
      if (index > -1) {
        promptForm.tags.splice(index, 1)
      }
    }

    // 向提示词追加内容
    const appendToPrompt = (text) => {
      if (promptForm.prompt) {
        promptForm.prompt += `, ${text}`
      } else {
        promptForm.prompt = text
      }
    }

    // 处理预览图上传
    const handlePreviewUpload = (file) => {
      const reader = new FileReader()
      reader.onload = (e) => {
        previewImageUrl.value = e.target.result
      }
      reader.readAsDataURL(file.raw)
    }

    // 处理文件超出限制
    const handleExceed = () => {
      ElMessage.warning('只能上传一张预览图')
    }

    // 清除预览图
    const clearPreviewImage = () => {
      previewImageUrl.value = ''
    }

    // 使用模板
    const useTemplate = (templateType) => {
      switch (templateType) {
        case 'portrait':
          promptForm.prompt = '一个[年龄]岁的[性别][种族]人，[面部特征]，[发型]，穿着[服装风格]的衣服，[光线条件]，[背景环境]，[艺术风格]，高清细节'
          promptForm.category = 'portrait'
          break
        case 'landscape':
          promptForm.prompt = '[季节]的[地点]风景，[主要元素]，[天气条件]，[光线时间]，[视角]，[艺术风格]，高清细节'
          promptForm.category = 'landscape'
          break
        case 'anime':
          promptForm.prompt = '动漫风格的[角色]，[特征描述]，[服装]，[场景]，[表情]，[姿势]，[艺术风格]，高清细节'
          promptForm.category = 'anime'
          break
        case 'code':
          promptForm.prompt = '用[编程语言]实现[功能描述]，包含[具体要求]，代码需要[质量要求]，并添加适当的注释'
          promptForm.category = 'code'
          break
      }
    }

    // 重置表单
    const resetForm = () => {
      promptFormRef.value.resetFields()
      promptForm.tags = []
      previewImageUrl.value = ''
    }

    // 预览提示词
    const previewPrompt = () => {
      promptFormRef.value.validate((valid) => {
        if (valid) {
          showPreviewDialog.value = true
          // 模拟预览加载
          previewLoading.value = true
          setTimeout(() => {
            previewLoading.value = false
          }, 1500)
        }
      })
    }

    // 调整提示词
    const adjustPrompt = () => {
      showPreviewDialog.value = false
    }

    // 确认预览
    const confirmPreview = () => {
      showPreviewDialog.value = false
      submitPrompt()
    }

    // 提交提示词
    const submitPrompt = () => {
      promptFormRef.value.validate((valid) => {
        if (valid) {
          // 这里可以添加提交到服务器的逻辑
          console.log('提交的提示词数据:', promptForm)
          
          ElMessage.success('提示词创建成功！')
          
          // 模拟提交延迟
          setTimeout(() => {
            // 如果选择公开分享，跳转到广场页面
            if (promptForm.isPublic) {
              router.push('/square')
            } else {
              // 否则重置表单，继续创建
              resetForm()
            }
          }, 1000)
        }
      })
    }

    return {
      promptFormRef,
      promptForm,
      rules,
      availablePlatforms,
      popularStyles,
      tagInput,
      previewImageUrl,
      showPreviewDialog,
      previewLoading,
      selectedPlatforms,
      addTag,
      removeTag,
      appendToPrompt,
      handlePreviewUpload,
      handleExceed,
      clearPreviewImage,
      useTemplate,
      resetForm,
      previewPrompt,
      adjustPrompt,
      confirmPreview,
      submitPrompt
    }
  }
}
</script>

<style scoped>
.create-container {
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h2 {
  font-size: 32px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #606266;
}

.create-content {
  display: flex;
  gap: 40px;
}

.editor-section {
  flex: 1;
  background-color: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.tips-section {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tips-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.tips-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 15px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.tips-list {
  list-style: none;
  padding: 0;
}

.tips-list li {
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
  color: #606266;
  line-height: 1.5;
}

.tips-list li::before {
  content: '•';
  color: #409eff;
  font-weight: bold;
  position: absolute;
  left: 8px;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.style-tag {
  cursor: pointer;
  transition: all 0.3s;
}

.style-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.platform-checkbox {
  margin-right: 20px;
  margin-bottom: 10px;
}

.platform-name {
  font-size: 16px;
}

.prompt-textarea {
  font-size: 16px;
  line-height: 1.6;
}

.word-count {
  text-align: right;
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.tag-input {
  margin-bottom: 10px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  cursor: pointer;
}

.preview-thumbnail {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.thumbnail-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ebeef5;
}

.action-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* 预览对话框样式 */
.preview-dialog-content {
  padding: 10px 0;
}

.preview-prompt-section {
  margin-bottom: 30px;
}

.preview-prompt-section h4 {
  font-size: 18px;
  color: #303133;
  margin-bottom: 10px;
}

.preview-prompt-text {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
  font-size: 16px;
  line-height: 1.6;
}

.preview-platforms-section h4 {
  font-size: 18px;
  color: #303133;
  margin-bottom: 20px;
}

.platform-previews {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.platform-preview {
  flex: 1;
  min-width: 250px;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}

.platform-preview h5 {
  font-size: 16px;
  color: #303133;
  margin-bottom: 15px;
  text-align: center;
}

.preview-result {
  width: 100%;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
}

.preview-placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ecf5ff;
  color: #409eff;
}

.preview-image-placeholder {
  font-size: 14px;
  color: #909399;
  text-align: center;
  line-height: 200px;
}

.preview-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .create-content {
    flex-direction: column;
  }
  
  .tips-section {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .create-container {
    padding: 10px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .editor-section {
    padding: 20px;
  }
  
  .platform-checkbox {
    width: 45%;
    margin-right: 5%;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .platform-previews {
    flex-direction: column;
  }
  
  .platform-preview {
    min-width: auto;
  }
}
</style>